<html>
    <head>
        <script>
			const dicta={
				"key0":'',
				"key1":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div>',
				"key2":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div>',
				"key3":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div>',
				"key4":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div>',
				"key5":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div>',
				"key6":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div>',
				"key7":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div>',
				"key8":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div>',
				"key9":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div>						',
				"key10":'<div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div><div style="width: 10%; height: 50px; background-color: red;  display:inline-block"></div><div style="width: 10%; height: 50px; background-color: blue;display:inline-block"></div>',
			}
			function load(){
				for (let i=1;i<=10;i++){
					var context = dicta["key"+i]
					console.log(context)
					var number1 = document.getElementById("number"+i);
                    number1.innerHTML = "";
                    number1.innerHTML = context;
                }
			
			
			}

        </script>
    </head>
    <body onload="load()">
		<div id="number0" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
        <div id="number1" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
		<div id="number2" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
		<div id="number3" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
		<div id="number4" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
		<div id="number5" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
		<div id="number6" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
		<div id="number7" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
		<div id="number8" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
		<div id="number9" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
		<div id="number10" style="border-bottom:10px;width:100%;height:60px;border:1px solid gray;"></div>
    </body>
</html>
